<template>
  <Dialog :appDialog="appDialog" @close="closeDialog">
    <!-- 搜索 -->
    <Search class="mb15" ref="SearchRef" v-model="isReadyInit" v-model:default_sea="default_sea" v-model:params="paramsForm" @submit="initList">
    </Search>
    <el-table class="mb15" row-key="id" :class="{ hide_All: single }" height="360" header-row-class-name="table_header_title"
      ref="TableRef" :data="cluesList" stripe style="width: 100%" @select-all="selectAll" @select="selectGroup">
      <el-table-column type="selection" :reserve-selection="true" width="55" />
      <el-table-column prop="name" label="线索名称" align="left"></el-table-column>
      <el-table-column prop="mobile" label="手机号" align="left"></el-table-column>
      <el-table-column prop="work_user_name" label="归属员工" align="left"></el-table-column>
      <el-table-column prop="clue_level_name" label="线索等级" align="left"></el-table-column>
      <el-table-column prop="clue_seas_name" label="线索公海" align="left"></el-table-column>
      <el-table-column prop="created_at" label="添加时间" align="center"></el-table-column>
      <template #empty>
        <img class="emty_img" src="@/assets/noData.png" alt="" />
        <div class="emty_title">{{ '暂无数据' }}</div>
      </template>
    </el-table>

    <ZWPagination ref="paginationRef" @submit="fnGetContactList" />
    
  </Dialog>
</template>
<script setup lang="ts">
import { reactive, ref, onMounted, watchEffect, nextTick } from 'vue'
import { ElMessage } from 'element-plus'

import { getCluesList } from '@/api/customerCenter'

import Search from './SearchClues.vue'
import Dialog from '@/components/Dialog.vue'
import ZWPagination from '@/components/ZWPagination.vue'

import { useStore } from '@/store'
const store = useStore()
const TableRef = ref<HTMLElement | null>(null);
const cluesList = reactive([])
const selected = ref([])
const single = ref(false); //单选
const echoDataId = ref([]); //回显数据
const emits = defineEmits(['submit'])

let isReadyInit = ref<boolean>(false)
let default_sea = ref<number>()
let paramsForm = ref<any>({})

const selectAll = (row: any) => {
  selected.value = row
}

const selectGroup = (val: any, row: any) => {
  if (single.value) {
    TableRef.value.clearSelection()
    TableRef.value.toggleRowSelection(row, true)
    selected.value = [row]
  } else {
    selected.value = val
  }
}

const cancelHandel = () => {
  appDialog.visible = false
  selected.value = []
}

const submitHandel = () => {
  emits('submit', selected.value)
  cancelHandel()
}

const fnGetContactList = async (data?: any) => {
  let params = {
    page: data?.page || 1,
    page_size: data?.page_size || 15,
    select_tag_type: 0,
    is_wx_work: -1,
    touch_mode: -1,
    cust_status: -1,
    group_chat: 0,
    protect: 0,
    ...data,
    ...paramsForm.value
  }
  if(!params.create_time) {
    params.create_time = []
  }
  const res: any = await getCluesList(params);
  const { data: data2, total } = res
  cluesList.splice(0)
  cluesList.push(...data2)
  if (echoDataId.value.length > 0) {
    const arr: any[] = data2.filter((item: any) => echoDataId.value.includes(item.id));
    nextTick(() => {
      arr.forEach((item: any) => {
        TableRef.value.toggleRowSelection(item, true)
      })
    })
  }
  store.dispatch('pageTotal', total)
}

const initList = (data?: any, isClear?: any) => {
  if(isClear){
    TableRef.value.clearSelection()
  }
  let params = {
    page: 1,
    page_size: 15,
    clue_sea: [default_sea.value],
    ...data
  }
  fnGetContactList(params)
}

const appDialog = reactive({
  visible: false,
  title: '选择线索',
  width: '71rem',
  cancel: cancelHandel,
  submit: submitHandel,
  cancelText: '取消',
  submitText: '保存'
})

const closeDialog = (): void => {
  store.dispatch('pageTotal', 0)
}

watchEffect(() => {
  if (isReadyInit.value) {
    initList()
  }
})

defineExpose({
  appDialog,
  single,
  echoDataId
})
</script>

<style lang="scss" scoped>
.mb15 {
  margin-bottom: 15px;
}

.avatar_box {
  display: flex;

  .avatar {
    width: 40px;
    height: 40px;
    // vertical-align: middle;
    margin-right: 5px;
  }

  .avator_icon {
    vertical-align: middle;
    margin-left: 5px;
  }
}

:deep .table_header_title {
  height: 60px;

  th.el-table__cell {
    background: #f9f9f9;
    padding: 10px 0;
  }
}

.hide_All {
  :deep .el-table__header-wrapper {
    thead .table_header_title .el-checkbox {
      display: none;
    }
  }
}
</style>
